<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Map方法使用说明</title>
  <!-- 
  `Map`  是 JavaScript ES6 中引入的一种数据结构，用于存储键值对。与普通对象不同， `Map`  允许使用任何类型的值作为键，包括对象、函数等。
  一、创建 Map
  使用  `new Map()`  创建一个新的  `Map`  实例。
  const myMap = new Map();
  二、基本操作
   1. 添加元素
  使用  `set(key, value)`  方法向  `Map`  中添加元素。
  myMap.set('name', '小明');
  myMap.set('age', 25);
  console.log(myMap); // 输出: Map { 'name' => '小明', 'age' => 25 }
   2. 获取元素

  使用  `get(key)`  方法获取  `Map`  中指定键的值。如果该键不存在，则返回  `undefined` 。
  console.log(myMap.get('name')); // 输出: 小明
  console.log(myMap.get('gender')); // 输出: undefined
   3. 删除元素

  使用  `delete(key)`  方法删除  `Map`  中的元素。如果删除成功，返回  `true` ；如果该键不存在，返回  `false` 。
  myMap.delete('age');
  console.log(myMap); // 输出: Map { 'name' => '小明' }
   4. 检查键

  使用  `has(key)`  方法检查  `Map`  中是否存在某个键。
  console.log(myMap.has('name')); // 输出: true
  console.log(myMap.has('age')); // 输出: false
   5. 清空 Map

  使用  `clear()`  方法清空  `Map`  中的所有元素。
  myMap.clear();
  console.log(myMap); // 输出: Map {}
   6. Map 的大小

  使用  `size`  属性获取  `Map`  中键值对的数量。
  myMap.set('name', '小明');
  myMap.set('age', 25);
  console.log(myMap.size); // 输出: 2

  三、迭代 Map
  `Map`  是可迭代的，可以使用  `for...of`  循环进行迭代。

   1. 迭代键值对
  for (const [key, value] of myMap) {
      console.log(`${key}: ${value}`); // 输出: name: 小明, age: 25
  }
   2. 迭代键

  使用  `keys()`  方法获取  `Map`  中所有的键。
  for (const key of myMap.keys()) {
      console.log(key); // 输出: name, age
  }
   3. 迭代值

  使用  `values()`  方法获取  `Map`  中所有的值。
  for (const value of myMap.values()) {
      console.log(value); // 输出: 小明, 25
  }

  四、总结
  -  `Map`  是一种用于存储键值对的数据结构，支持任何类型的值作为键。
  - 主要方法包括  `set()` 、 `get()` 、 `delete()` 、 `has()`  和  `clear()` 。
  - 可以通过  `size`  属性获取元素数量，并且可以使用  `for...of`  循环和其他迭代方法遍历  `Map` 。
  -  `Map`  在需要频繁查找、添加和删除键值对的场景中表现优异。
  -->
</head>

<body>

  <script>

    // Map 是一种用于存储键值对的数据结构，支持任何类型的值作为键。
    // 主要方法包括 set()、get()、delete()、has() 和 clear()。
    // 可以通过 size 属性获取元素数量，并且可以使用 for...of 循环和其他迭代方法遍历 Map。
    // Map 在需要频繁查找、添加和删除键值对的场景中表现优异。

    // 创建一个 Map 对象
    const myMap = new Map();

    // 添加键值对
    myMap.set('name', '小明'); // 输出: true
    myMap.set('age', 25); // 输出: true

    // 获取值
    console.log(myMap.get('name')); // 输出: 小明
    console.log(myMap.get('age')); // 输出: 25

    // 删除键值对
    myMap.delete('age'); // 输出: true

    // 检查键是否存在
    console.log(myMap.has('name')); // 输出: true
    console.log(myMap.has('age')); // 输出: false

    // 清空 Map
    myMap.clear(); // 输出: undefined

    // 获取 Map 的元素数量
    console.log(myMap.size); // 输出: 0

    // 遍历 Map
    myMap.set('name', '小明');
    myMap.set('age', 25);

    // 使用 for...of 循环遍历键值对
    for (const [key, value] of myMap) {
      console.log(key, value); // 输出: name 小明, age 25
    }

    // for...of 循环遍历键
    for (const key of myMap.keys()) {
      console.log(key); // 输出: name, age
    }

    // for...of 循环遍历值
    for (const value of myMap.values()) {
      console.log(value); // 输出: 小明, 25
    }

    // 使用 forEach 方法遍历键值对
    myMap.forEach((value, key) => {
      console.log(key, value); // 输出: name 小明, age 25
    })

    // 案例: map操作对象
    const obj = {
      name: '小明',
      age: 25
    }

    const newMapObje = new Map();

    console.log("newMapObje", newMapObje.has(newMapObje));
    newMapObje.set(obj, obj);
    console.log("newMapObje", newMapObje);

  </script>

</body>

</html>